<template>
    <div>
        <el-row type="flex" justify="space-between" class="e-m-t-45">
            <el-col :span="3" class="buttonList">
                <el-button type="primary" icon="el-icon-plus" plain @click="dialogVisible = true">新建站点</el-button>
            </el-col>
            <el-col class="text-right">
                <el-form :inline="true" class="demo-form-inline">
                    
                    <el-form-item label="">
                        <el-input placeholder="请输入关键词" v-model="key" prefix-icon="el-icon-search"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="getList(true)">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>

        <!-- 更多筛选条件 -->
        <div class="other-search-form is-active">
            <el-form label-position="left" :inline="true" size="small">
                <div class="flex align-items-center">
                    <div class="e-flex-1" v-if="franchiseId == null">
                        <el-form-item label="所属加盟商">
                            <franchiseList v-model="listFranchiseId" :firstSelect="true" @change="selectFranchise"></franchiseList>
                        </el-form-item>
                    </div>
                    <div class="e-flex-1">
                        <el-form-item label="所属地区">
                            <cityList v-model="cityid" @change="selectCity"></cityList>
                        </el-form-item>
                    </div>
                    <div class="e-flex-1">
                        <el-form-item label="状态">
                            <el-select v-model="state" placeholder="请选择" @change="getList(true)">
                                <el-option v-for="item in statelist" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                </div>
            </el-form>
        </div>

        <el-table :data="tableData" :border="true" style="width: 100%" stripe>
            <el-table-column fixed type="index" width="50">
            </el-table-column>
            <el-table-column fixed prop="name" label="站点名称">
            </el-table-column>
            <el-table-column prop="franchise" label="所属加盟商">
                <template slot-scope="scope">
                    <el-tag>{{ scope.row.franchise.name }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="telephone" label="手机号" width="150">
            </el-table-column>
            <el-table-column prop="citynames" label="地区" width="180">
                <template slot-scope="scope">
                    <span>{{ scope.row.address.cityname }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="address" label="地址" width="220">
                <template slot-scope="scope">
                    <span>{{ scope.row.address.address }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="state" label="站点状态" width="180">
                <template slot-scope="scope">
                    <span class="color-success" v-if="scope.row.usestate == '已启用'">{{ scope.row.usestate }}</span>
                    <span class="color-danger" v-else>{{ scope.row.usestate }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="ismanage" label="是否营业" width="180">
                <template slot-scope="scope">
                    <!-- <span class="color-success" v-if="scope.row.ismanage">营业</span>
                    <span class="color-danger" v-else>休息</span> -->
                    <el-switch v-model="scope.row.ismanage" @change="switchState($event, scope.row.id)"></el-switch>
                </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="250">
                <template slot-scope="scope">
                    <el-button @click="views(scope.row.id)" type="text" size="small">查看</el-button>
                    <el-button @click="edit(scope.row.id)" type="text" size="small">编辑</el-button>
                    <!-- <el-button type="text" size="small" @click="setpassword(scope.row.id)">重置密码</el-button> -->
                    <el-button type="text" @click='startup(scope.row)' size="small">
                        <span v-if="scope.row.usestate == '已启用'">冻结</span>
                        <span v-else>启用</span>
                    </el-button>
                    <!-- <el-button type="text" @click='business(scope.row)' size="small" v-if="scope.row.usestate == '已启用'">
                        <span v-if="scope.row.ismanage">休息</span>
                        <span v-else>营业</span>
                    </el-button> -->
                </template>
            </el-table-column>
        </el-table>
        <div class="table-pagination">
            <el-pagination background layout="sizes, total, prev, pager, next" :total="total"
                :page-sizes="[10, 50, 100, 200]" :page-size="pageSize" :current-page="page" @current-change="pageChange"
                @size-change="handleSizeChange">
            </el-pagination>
        </div>
        <!-- 新建或编辑站点信息 -->
        <create-or-edit :dialog-visible.sync="dialogVisible" :storeId="storeId" @submit="submitType" @close="dialogVisible = false"></create-or-edit>
    </div>
</template>

<script>
// import {
// 	mapState
// } from 'vuex';

import franchiseList from '@/components/form-select-type/franchiseList.vue'
import cityList from '@/components/form-select-type/cityList.vue'
import timeChangeList from '@/components/form-select-type/timeChangeList.vue'
import createOrEdit from './createOrEdit';
export default {
    layout: 'admin',
    components:{
        createOrEdit,
        franchiseList,
        timeChangeList,
        cityList
    },
    head() {
        return {
            title: '站点列表' 
        }
    },
    props: {
        franchiseId: {
            type: Number,
            default: null
        }
    },
    data() {
        return {
            state: 0,
            statelist: [
                {
                    id: 0,
                    name: '全部'
                },
                {
                    id: 1,
                    name: '冻结'
                },
                {
                    id: 2,
                    name: '启用'
                },

            ],
            loading: true,
            key: '',
            page: 1,
            pageSize: 10,
            total: 0,
            tableData: [],
            cityid:0,
            resetForm: {
                id: 0,
                newpass: '',
                confirmpass: ''
            },
            dialogVisible: false,
            storeId: 0,
            listFranchiseId: null,
        }
    },
    mounted() {
        this.getList()
    },
    watch: {

    },
    // computed: {
	// 	...mapState({
	// 		operator: state => state.operator
	// 	}),
    // },
    methods: {
        // 选择加盟商
        selectFranchise(value){
            this.listFranchiseId = value,
            this.getList(true)
        },
        // 选择地区
        selectCity(value){
            this.cityid = value,
            this.getList(true)
        },
        //修改状态
        switchState(event, id) {
            this.$axios.get(`/Store/SetManage`, {
                params:{
                    storeId: id,
                    isManage: event
                }
            }).then((res) => {
                if (res.status == 0) {
                    this.$message.success(res.msg);
                } else {
                    this.$message.error(res.msg);
                }
            }).catch((err) => {
                this.getList()
            })
        },
        // business(row) {
        //     let usetate = ''
        //     if (row.ismanage) {
        //         usetate = false

        //     } else {
        //         usetate = true

        //     }

        //     this.$confirm('是否修改账号状态?', '提示', {
        //         confirmButtonText: '确定',
        //         cancelButtonText: '取消',
        //         type: 'warning'
        //     }).then(() => {

        //         this.$axios.post('/Admin/Store/SetOnlineStatus', { id: row.id, online: usetate }).then(res => {
        //             console.log(res)
        //             this.$message({
        //                 type: 'success',
        //                 message: '修改成功!'
        //             });
        //             this.getList()
        //         })



        //     }).catch(() => {
        //         // this.$message({
        //         //     type: 'info',
        //         //     message: '已取消删除'
        //         // });
        //     });
        // },
        startup(row) {
            let usetate = ''
            if (row.usestate == '已冻结') {
                usetate = 2

            } else {
                usetate = 1

            }

            this.$confirm('是否修改账号状态?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$axios.post('/Store/SetState', { ids: [row.id], state: usetate }).then(res => {
                    console.log(res)
                    this.$message({
                        type: 'success',
                        message: '修改成功!'
                    });
                    this.getList()
                })
            }).catch(() => {
                // this.$message({
                //     type: 'info',
                //     message: '已取消删除'
                // });
            });
        },
        views(id) {
            this.$router.push({
                path: '/shop/details?id=' + id
            })
        },
        edit(id){
            this.storeId = id
            this.dialogVisible = true
        },
        geoCode() {  //地理编码，根据地址获取经纬度坐标
            // this.$AMapLoader.load({
            //     key:"817cd2f4443e4b89c393cb3ec7c789ea",             // 申请好的Web端开发者Key，首次调用 load 时必填
            //     version:"1.4.15",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            //     plugins:['AMap.Autocomplete','AMap.PlaceSearch'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            // }).then((AMap)=>{
            //     var map = new AMap.Map("container1",{  //设置地图容器id
            //         resizeEnable: true,
            //         center:[this.form.lng,this.form.lat], //初始化地图中心点位置
            //     });

            //     var address = this.form.address;
            //     var geocoder = new AMap.Geocoder({
            //         city: "0763", //城市设为清远，默认：“全国”
            //     });

            //     var marker = new AMap.Marker();

            //     this.loading = true
            //     geocoder.getLocation(address, (status, result)=> {
            //         if (status === 'complete'&&result.geocodes.length) {
            //             var lnglat = result.geocodes[0].location
            //             // document.getElementById('lnglat').value = lnglat;
            //             console.log('lnglat:',lnglat)
            //             this.form.lat = lnglat.lat
            //             this.form.lng = lnglat.lng

            //             marker.setPosition(lnglat);
            //             map.add(marker);
            //             map.setFitView(marker);
            //             this.loading = false
            //         }else{
            //             this.$message.error('根据地址查询位置失败')
            //             this.loading = false
            //         }
            //     });
            // }).catch(e=>{
            //     console.log(e);
            // })

        },
        getList(renew = false) {
            if(renew == true){
                this.page = 1
            }
            this.$axios.post('/Store/List', {
                "PageIndex": this.page,
                "PageSize": this.pageSize,
                "Key": this.key,
                "cityid": this.cityid || 0,
                "state": this.state,
                "franchiseId": this.franchiseId || this.listFranchiseId || 0,
                operatorid: JSON.parse(localStorage.getItem('lifeData')).operatorid,
            }).then((res) => {
                console.log(res)
                this.loading = false
                this.tableData = res.rows;
                this.total = res.total;
            }).catch(() => {
                this.loading = false
            })
        },
        pageChange(e) { // 页码切换事件
            this.page = e;
            this.getList()
        },
        handleSizeChange(val) {
            this.page = 1;
            this.pageSize = val;
            this.getList()
        },
        submitType(storeId,form) {
            let api = ''
            if (storeId > 0) {
                api = '/Store/Edit'
            }else{
                api = '/Store/create'
            }
            this.loading = true
            this.$axios.post(api, form).then((res) => {
                this.$message.success(res.msg);
                this.dialogVisible = false;
                this.loading = false
                this.getList()
            }).catch((err) => {
                this.loading = false
            })
        },
    }
}
</script>

<style lang="scss" scoped>
.nav-bar {
    padding: 20px 0 0;
}

.send {
    margin-top: 15px;
    margin-right: 10px;
}

.dialogForm {
    display: flex;
    flex-wrap: wrap;

    .el-form-item {
        width: 50%;
        float: left;

        &.all {
            width: 100%;
        }

        .el-select {
            width: 100%;
        }
    }
}

.user-face {
    display: flex;
    align-items: center;
    position: relative;

    .male,
    .female {
        font-size: 14px;
        position: absolute;
        left: 30px;
        top: 0;
        background-color: #fff;
        height: 16px;
        width: 16px;
        line-height: 16px;
        border-radius: 6px;
    }

    .male {
        color: var(--blue);
    }

    .female {
        color: var(--pink);
    }
}
</style>
